<template>
  <div>
    <el-row>
      <el-col :span="2"
        ><div class="grid-content bg-purple">&emsp;</div></el-col
      >
      <el-col :span="20"
        ><div class="grid-content bg-purple-light">
          <h3>公司本月业绩信息</h3>
          <!-- 公司业绩信息展示 -->
          <el-row>
            <el-col :span="6"
              ><div class="grid-content bg-purple">
                <template>
                  请选择还款状态：
                  <el-select
                    @change="changeStatus"
                    v-model="query.status"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </template></div
            >
          
            <el-button type="primary" round @click="look">查看图表</el-button>
          </el-col>
            <el-col :span="18"
              ><div class="grid-content bg-purple-light"></div
            ></el-col>
          </el-row>

          <el-row style="30px">&emsp;</el-row>
          <!-- 表格展示 -->
          <template>
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="contractId" label="合同id" width="auto">
              </el-table-column>
              <el-table-column prop="realName" label="借款人" width="auto">
              </el-table-column>
              <el-table-column prop="cardNo" label="身份证号" width="auto">
              </el-table-column>
              <el-table-column prop="productName" label="产品名字" width="auto">
              </el-table-column>
              <el-table-column
                prop="productInterest2"
                label="产品利率"
                width="auto"
              >
              </el-table-column>
              <el-table-column prop="repayShould" label="欠款本金" width="auto">
              </el-table-column>
              <el-table-column
                prop="repayAlready"
                label="已还本金"
                width="auto"
              >
              </el-table-column>
              <el-table-column
                prop="repayMethodName"
                label="还款方式"
                width="auto"
              >
              </el-table-column>
              <el-table-column prop="repayNum" label="还款期数" width="auto">
              </el-table-column>
              <el-table-column
                prop="repayCurrentPeriod"
                label="当前期数"
                width="auto"
              >
              </el-table-column>
              <el-table-column
                prop="currentPrincipalPayable"
                label="本期本金"
                width="auto"
              >
              </el-table-column>
              <el-table-column
                prop="currentInterestPayable"
                label="本期利息"
                width="auto"
              >
              </el-table-column>
              <el-table-column
                prop="currentTotalMoney"
                label="本期总额"
                width="auto"
              >
              </el-table-column>
              <el-table-column
                prop="overdueTime"
                label="最后还款日"
                width="auto"
              >
              </el-table-column>
              <el-table-column
                prop="repayRecordStatus"
                :formatter="showStatus"
                label="还款状态"
              >
              </el-table-column>
            </el-table>
          </template>
          <el-row style="30px">&emsp;</el-row>
          <!-- 分页 -->
          <div class="block">
            <span class="demonstration"></span>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="query.currentPage"
              :page-sizes="pageInfo.pageSizes"
              :page-size="query.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageInfo.total"
            >
            </el-pagination>
          </div></div
      ></el-col>
      <el-col :span="2"
        ><div class="grid-content bg-purple">&emsp;</div></el-col
      ></el-row
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageInfo: {
        pageSizes: [10, 15, 20, 25, 30],
        total: 1,
      },
      query: {
        contractId: 0,
        currentPage: 1,
        pageSize: 10,
        status: "",
      },
      tableData: [],
      options: [
        {
          value: "1",
          label: "已还款",
        },
        {
          value: "2",
          label: "待还款",
        },
        {
          value: "3",
          label: "逾期",
        },
      ],
    };
  },
  methods: {
    look(){
      this.$router.push("/Echart")
    },
    changeStatus() {
      alert(this.query.status);
      this.loadManageRepay();
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.loadManageRepay();
    },
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.loadManageRepay();
    },

    showStatus(row, column, cellValue, index) {
      if (cellValue == 1) {
        return "按时完成";
      } else if (cellValue == 2) {
        return "待支付";
      } else {
        return "已逾期";
      }
    },
    loadManageRepay() {
      this.$axios
        .post("repayRecord/manageRepay", this.query)
        .then((res) => {
          this.tableData = res.data.data.list;
          for (let i = 0; i < this.tableData.length; i++) {
            this.tableData[i].productInterest2 =
              this.tableData[i].productInterest2 * 100 + "%";
          }
          this.pageInfo.total = res.data.data.total;
        })
        .error((error) => {
          this.$message.error("系统出错，请稍后再试");
        });
    },
  },
  mounted() {
    this.loadManageRepay();
  },
};
</script>

